<template>
  <transition name="componentTab">
    <div class="note" v-if="noteInfo" ref="note">
      <header class="header">
        <div class="left">
          <van-icon
            class="icon"
            name="arrow-left"
            @click.stop="$router.go(-1)"
          />
          <div class="user">
            <div class="img-box">
              <img :src="noteInfo.author.p" alt="" />
            </div>
            <div class="user-detail">
              <div class="first">
                <div class="my-text name">{{ noteInfo.author.n }}</div>
                <div class="lvl">lv{{ noteInfo.author.lvl }}</div>
              </div>
              <div>{{ noteInfo.straight_text }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="btn" @click.stop="payAtt()">
            {{ !isPayAtt ? "关注" : "已关注" }}
          </div>
          <van-icon class="icon" name="ellipsis" />
        </div>
      </header>
      <div class="big-img">
        <img :src="noteInfo.entity.img" alt="" />
      </div>
      <section class="content" title="笔记详情">
        <div class="note-title">{{ noteInfo.entity.title }}</div>
        <div
          class="text-item"
          v-for="(item, index) in this.noteInfo.contents"
          :key="index"
        >
          <div v-if="!item.note" class="single-text">
            <div v-if="item.id == 0">
              <div
                class="single-t"
                v-for="(text, i) in item.c.split(/\s/g)"
                :key="i"
              >
                {{ text }}
              </div>
            </div>
            <span v-else>#{{ item.c }}</span>
          </div>
          <div class="item-note" @click.stop="toDetail(item)" v-else>
            <div class="left">
              <img :src="item.note.image_u" alt="美食" />
            </div>
            <div class="right">
              <div class="my-text title">{{ item.note.title }}</div>
              <div class="user">{{ item.note.author.n }}</div>
              <div class="tt">笔记</div>
            </div>
          </div>
        </div>
      </section>
      <section class="order-notes" title="相关笔记" v-if="orderNotes">
        <div class="order-title">相关笔记</div>
        <div class="order-notes-content">
          <div class="left">
            <NoteItem
              v-for="(item, index) in showList[0]"
              :key="item.id + '' + index"
              :item="item"
            />
          </div>
          <div class="right">
            <NoteItem
              v-for="(item, index) in showList[1]"
              :key="item.id + '' + index"
              :item="item"
            />
          </div>
        </div>
      </section>
      <footer class="footer">
        <div class="input">
          <input type="text" placeholder="说点什么" />
        </div>
        <div class="footer-item">
          <van-icon class="icon" name="chat-o" />
          <div class="text">评论</div>
        </div>
        <div class="footer-item">
          <van-icon class="icon" name="like-o" />
          <div class="text">{{ noteInfo.like_count }}</div>
        </div>
        <div
          class="footer-item"
          :class="{ active: isCollection }"
          @click.stop="payCollection"
        >
          <van-icon class="icon" name="star-o" />
          <div class="text">{{ !isCollection ? "收藏" : "已收藏" }}</div>
        </div>
      </footer>
    </div>
  </transition>
</template>

<script>
import qs from "qs";
import NoteItem from "@/components/NoteItem.vue";
export default {
  components: {
    NoteItem,
  },
  data: () => {
    return {
      noteInfo: null,
      orderNotes: null,
      leftHeight: 0,
      rightHeight: 0,
      isPayAtt: false, //关注用户
      isCollection: false, //收藏笔记
    };
  },
  computed: {
    id() {
      return this.$route.params.noteid;
    },
    showList() {
      let cat = [[], []];
      this.orderNotes.map((item) => {
        let width = item?.activity?.image_w || item?.note.image_w;
        let scale = width / 750;
        let height = item?.activity?.image_h || item?.note.image_h;
        height = Number.parseInt(height) / scale;
        if (this.leftHeight <= this.rightHeight) {
          cat[0].push(item);
          this.leftHeight += height;
        } else {
          cat[1].push(item);
          this.rightHeight += height;
        }
      });
      return cat;
    },
  },
  // watch:{
  //   id(){
  //     this.getNoteInfo();
  //     this.getOrderNotes();
  //   }
  // },
  methods: {
    payCollection() {
      this.api.payNote(this.noteInfo, this.isCollection);
      this.$toast.success("操作成功");
      this.isCollection = !this.isCollection;
    },
    payAtt() {
      this.api.payAttention(this.noteInfo.author, this.isPayAtt);
      this.$toast.success("操作成功");
      this.isPayAtt = !this.isPayAtt;
    },
    toDetail(item) {
      this.$router.push({
        name: "notedetail",
        params: {
          noteid: item.id,
        },
      });
    },
    //获取笔记详情
    getNoteInfo() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/note/detail`,
        data: qs.stringify({
          id: this.id,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.noteInfo = res.data.result.note;
        console.log(this.noteInfo);
        this.$nextTick(() => {
          let attList = JSON.parse(localStorage.getItem("attentionList")) || [];
          this.isPayAtt = attList.some(
            (item) => item.id == this.noteInfo.author.id
          );
          let cool = JSON.parse(localStorage.getItem("noteList")) || [];
          this.isCollection = cool.some((item) => item.id == this.noteInfo.id);
          this.$refs.note.scrollTop = 0;
        });
      });
    },
    //获取相关笔记
    getOrderNotes() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/note/related/0/20`,
        data: qs.stringify({
          id: this.id,
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.leftHeight = 0;
        this.rightHeight = 0;
        this.orderNotes = res.data.result.list;
      });
    },
  },
  activated() {
    if (this.noteInfo && this.noteInfo.id == this.id) return;
    this.getNoteInfo();
    this.getOrderNotes();
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getNoteInfo();
    this.getOrderNotes();
  },
};
</script>

<style lang="scss" scoped>
.note {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--white);
  z-index: 100;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .header {
    position: sticky;
    left: 0;
    top: 0;
    background-color: var(--bgc-white);
    z-index: 100;
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex-grow: 1;
      display: flex;
      align-items: center;
      .icon {
        font-size: 0.25rem;
        margin: 0 0.1rem;
      }
      .user {
        display: flex;
        align-items: center;
        .img-box {
          width: 0.3rem;
          height: 0.3rem;
          border-radius: 0.15rem;
          overflow: hidden;
        }
        .user-detail {
          margin-left: 0.05rem;
          font-size: 0.14rem;
          color: var(--text-gray);
          .first {
            display: flex;
            .name {
              color: var(--text-black);
            }
            .lvl {
              font-size: 0.12rem;
              color: var(--text-lv);
              margin-left: 0.05rem;
            }
          }
        }
      }
    }
    .right {
      min-width: 1.3rem;
      display: flex;
      align-items: center;
      .btn {
        width: 0.7rem;
        height: 0.3rem;
        font-size: 0.13rem;
        line-height: 0.3rem;
        text-align: center;
        background-color: var(--bgc-yellow);
        color: var(--text-black);
        border-radius: 0.15rem;
      }
      .icon {
        font-size: 0.3rem;
        margin: 0 0.1rem;
        margin-left: 0.2rem;
      }
    }
  }
  .big-img {
    width: 100%;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.1rem 0.1rem 0.1rem;
    color: var(--text-black);
    .note-title {
      font-size: 0.2rem;
      font-weight: bold;
      margin-bottom: 0.1rem;
    }
    .text-item {
      color: var(--text-black);
      font-size: 0.16rem;
      .single-text {
        .single-t {
          margin: 0.05rem 0;
        }
        > span {
          float: left;
          color: var(--text-green);
        }
      }
      .item-note {
        width: 100%;
        height: 0.8rem;
        background-color: var(--bgc-gray);
        display: flex;
        align-items: center;
        margin-bottom: 0.12rem;
        .left {
          width: 0.6rem;
          min-width: 0.6rem;
          height: 0.6rem;
          border-radius: 0.06rem;
          margin-left: 0.1rem;
          overflow: hidden;
        }
        .right {
          position: relative;
          flex-grow: 1;
          height: 100%;
          margin-left: 0.1rem;
          color: var(--text-black);
          font-size: 0.14rem;
          box-sizing: border-box;
          padding: 0.1rem 0;
          .title {
            font-size: 0.15rem;
          }
          .user {
            font-size: 0.13rem;
          }
          .tt {
            position: absolute;
            color: var(--text-gray2);
            bottom: 0.1rem;
            right: 0.1rem;
          }
        }
      }
    }
  }
  .order-notes {
    overflow: hidden;
    width: 100%;
    padding: 0 0.05rem;
    box-sizing: border-box;
    .order-title {
      font-size: 0.2rem;
      font-weight: bold;
      margin: 0.1rem 0;
    }
    .order-notes-content {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: var(--bgc-white);
    z-index: 1000;
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.16rem;
    box-sizing: border-box;
    padding: 0 0.1rem;
    .input {
      font-size: 0.16rem;
      width: 1.3rem;
      height: 0.35rem;
      border-radius: 0.08rem;
      overflow: hidden;
      > input {
        height: 100%;
        border: none;
        outline: none;
        background-color: var(--bgc-gray);
        text-indent: 0.12rem;
      }
    }
    .footer-item {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        font-size: 0.25rem;
      }
      .text {
        margin-left: 0.05rem;
        font-size: 0.16rem;
        line-height: 0.16rem;
      }
      &:last-child {
        min-width: 0.8rem;
      }
    }
    .active {
      color: var(--text-yellow);
    }
  }
}
</style>